<template>
	<scroll-view class="wuc-tab" :class="tabClass" :style="tabStyle" scroll-with-animation scroll-x :scroll-left="scrollLeft">
		<view v-if="!textFlex">
			<view class="wuc-tab-item" :class="[index === tabCur ? selectClass + ' cur':'']" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
				<text :class="item.icon"></text>
				<text class="color-3A3A3A">{{item.name}}</text>
			</view>
		</view>
		<view class="flex text-center" v-if="textFlex">
			<view class="wuc-tab-item flex-sub" :class="index === tabCur ? selectClass + ' cur':''" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
				<text :class="item.icon"></text>
				<text class="color-3A3A3A">{{item.name}}</text>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		name: 'wuc-tab',
		data() {
			return {};
		},
		props: {
			tabList: {
				type: Array,
				default () {
					return [];
				}
			},
			tabCur: {//被选中的 tab 位置
				type: Number,
				default () {
					return 0;
				}
			},
			tabClass: {//tab 的基础样式
				type: String,
				default () {
					return '';
				}
			},
			tabStyle: {//tab 的基础样式
				type: String,
				default () {
					return '';
				}
			},
			textFlex: {//是否平分
				type: Boolean,
				default () {
					return false;
				}
			},
			selectClass: {
				type: String,
				default () {
					return 'text-blue';
				}
			}
		},
		methods: {
			tabSelect(index, e) {
				this.$emit('update:tabCur', index);
				this.$emit('change', index);
			}
		},
		computed: {
			scrollLeft() {
				return (this.tabCur - 1) * 60;
			}
		}
	};
</script>
<style>
	.wuc-tab {
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.wuc-tab {
		white-space: nowrap;
	}

	.wuc-tab-item {
		height: 50px;
		display: inline-block;
		box-sizing: border-box;
		line-height: 50px;
		font-size: 36rpx;
		margin: 0 10rpx;
		padding: 0 20rpx;
		position: relative;
	}
	
	.wuc-tab-item.cur::after{
		content: "";
		position: absolute;
		bottom: 0;
		height: 4rpx;
		width: 100rpx;
		border-radius: 50rpx;
		left: 50%;
		transform: translate(-50%);
		background:#3281ff;
	}
	
	.wuc-tab-item.cur {
		/* border-bottom: 2upx solid; */
	}

	.wuc-tab.fixed {
		/* position: fixed; */
		/* width: 100%; */
		top: 0;
		z-index: 1024;
		box-sizing: border-box;
		box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
	}

	.flex {
		display: flex;
	}

	.text-center {
		text-align: center;
	}

	.flex-sub {
		flex: 1;
	}

	.text-blue {
		color: #3281ff;
	}

	.text-white {
		color: #ffffff;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.bg-blue {
		background-color: #3281ff;
	}

	.text-orange {
		color: #0E80D2
	}

	.text-xl {
		font-size: 36upx;
	}
</style>
